<%@page import="groovy.view.Index"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ch">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>主页</title>

		<link href="css/font-awesome.min.css" rel="stylesheet">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/templatemo-style.css" rel="stylesheet">

		<style>
			.templatemo-left-nav a:focus {
				background: #18191b;
				border-left: 8px solid #13895F;
				text-decoration: none;
			}
			
			.nav-keep-focus {
				background: #18191b;
				border-right: 8px solid #13895F;
				text-decoration: none;
			}
			
			.templatemo-left-nav .panel {
				background: none;
				cursor: pointer;
			}
			
			.templatemo-left-nav .panel-body {
				padding: 0;
			}
			
			.templatemo-left-nav .panel-body a:hover,
			.templatemo-left-nav .panel-body a:active,
			.templatemo-left-nav .panel-body a:focus {
				margin-left: 15px;
				border-left: 8px solid #D7425C;
			}
            
            .templatemo-content {
                min-height: calc(100vh);
            }
            
            .templatemo-top-nav li{
                cursor: pointer;
            }
            
            .margin-top-10 {
                margin-top: 10px;
            }
            .margin-bottom-25 {
            	margin-bottom: 25px;
            }
            footer {
                position: absolute;
                right: 10px;
                bottom: 0px;
            }
            .relative-position {
            	position: relative;;
            }
            .text-center {
            	text-align: center;
            }
            .text-large {
            	font-size: 18px;
            }
            .text-name {
            	font-size: 30px;
            }
		</style>
	</head>

	<body>
		<div class="templatemo-flex-row">
			<div class="templatemo-sidebar">
				<header class="templatemo-site-header">
					<div class="square"></div>
					<h1>测试系统</h1>
				</header>
				<div class="profile-photo-container" style="text-align: center;">
					<img src="images/school.png" alt="Profile Photo" class="img-responsive" style="display: inline;">
					<div class="profile-photo-overlay"></div>
				</div>
				<div class="mobile-menu-icon">
					<i class="fa fa-bars"></i>
				</div>
				<nav class="templatemo-left-nav">
					<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
						<div class="panel collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
							<div class="collapse-title" role="tab" id="collapse-head-1">
								<a><i class="fa fa-bar-chart fa-fw"></i>模块A</a>
							</div>
							<div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapse-head-1" aria-expanded="false">
								<div class="panel-body">
									<a href="#">项目A</a>
									<a href="#">项目B</a>
									<a href="#">项目C</a>
								</div>
							</div>
						</div>

						<div class="panel collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
							<div class="collapse-title" role="tab" id="collapse-head-2">
								<a><i class="fa fa-home fa-fw"></i>模块B</a>
							</div>
							<div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapse-head-2" aria-expanded="false">
								<div class="panel-body">
									<a href="#">项目A</a>
									<a href="#">项目B</a>
								</div>
							</div>
						</div>

						<div class="panel collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
							<div class="collapse-title" role="tab" id="collapse-head-3">
								<a><i class="fa fa-bullhorn fa-fw"></i>模块C</a>
							</div>
							<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapse-head-3" aria-expanded="false">
								<div class="panel-body">
									<a href="#">项目A</a>
									<a href="#">项目B</a>
								</div>
							</div>
						</div>
					</div>
				</nav>
			</div>

			<div class="templatemo-content col-1 light-gray-bg relative-position">
				<div class="templatemo-top-nav-container">
					<div class="row">
						<nav class="templatemo-top-nav col-lg-12 col-md-12">
							<ul class="text-uppercase">
								<li><a>主页</a></li>
							</ul>
						</nav>
					</div>
				</div>
				<div class="templatemo-content-container">
					<div class="templatemo-flex-row flex-content-row">
						<% Index index = Index.fromSession(request.getSession()); %>
						<div class="templatemo-content-widget white-bg col-1 text-center">
							<h2 class="text-name margin-bottom-25"><%= index.getName() %></h2>
							<h3 class="text-uppercase margin-top-10 margin-bottom-10"></h3>
							<img src="images/bicycle.jpg" alt="Bicycle" class="img-circle img-thumbnail">
						</div>
						<div class="templatemo-content-widget white-bg col-2">
							<div class="square"></div>
							<h2 class="templatemo-inline-block">我是谁</h2>
							<hr>
							<p class="text-large"><%= index.getContext() %></p>
						</div>                        
					</div>
				</div>
				<footer class="text-right">
					<p>Copyright &copy; 测试系统 | Designed by <a href="http://www.templatemo.com" target="_parent">templatemo</a></p>
				</footer>
			</div>
			<!-- JS -->
			<script src="js/jquery-1.11.2.min.js"></script>
			<!-- jQuery -->
			<script src="js/jquery-migrate-1.2.1.min.js"></script>
			<!--  jQuery Migrate Plugin -->
			<script>
				$(document).ready(function() {
					if ($.browser.mozilla) {
						$(window).bind('resize', function(e) {
							if (window.RT) clearTimeout(window.RT);
							window.RT = setTimeout(function() {
								this.location.reload(false);
							});
						});
					}
					$('.collapse-title').click(function() {
						$('.collapse-title').removeClass('nav-keep-focus');
						$(this).addClass('nav-keep-focus');
					});
				});
			</script>
			<!-- Templatemo Script -->
			<script type="text/javascript" src="js/templatemo-script.js"></script>
			<!-- bootstrap -->
			<script src="js/bootstrap.js"></script>
	</body>
</html>